<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <!--weui.min.css-->
    <link rel="stylesheet" type="text/css" href="/static/index/jquery_weui/lib/weui.min.css">
    <!--jquery-weui.min.css-->
    <link rel="stylesheet" type="text/css" href="/static/index/jquery_weui/css/jquery-weui.min.css">
    <link rel="stylesheet" href="/static/index/css/page/base.css" />
    <link rel="stylesheet" href="/static/index/css/page/font.css" />
    <link rel="stylesheet" href="/static/index/css/page/index.css" />
    <style>
        .pl{
            position: relative;
        }
        .ssjj_btn{
            position: absolute;
            left: 0;
            right:0;
            top:0;
            bottom: 0;
        }
        .weui-cell{
            width: 70%;
            margin: 0 auto;
        }
        .weui-cell:before{
            border-top:none;
        }
        .weui-input{
            border:1px solid #a00000;
            margin-left: 2rem;
            width: 80%;
            border-radius: 6px;
            padding: .2rem;
            color: #fff;
        }
        .weui-cell__hd div{
            display: flex;
            width: 3.2rem;
            justify-content: space-between;
            font-size: .8rem;
        }
        .lr_btn{
            display: flex;
            flex-direction: row;
            justify-content: center;
        }
        .lr_btn img{
            height: 100%;
            width: auto;
        }
        .lr_btn1{
            height: 100%;
        }
        .xia{
            position: absolute;
            right: 0;
            top:50%;
            margin-top: -.2rem;
        }
        .xia img{
            height: .4rem;
            width: auto;
        }
        img {
            width: 100%;
            height: auto;
            margin: 0 auto;
            display: block;
        }
    </style>
</head>
<body>
<div class="pageControl">
    <div class="pl">
        <img src="/static/index/img/lr1.png" alt="">
    </div>
    <div class="pl">
        <img src="/static/index/img/lr2.png" alt="">
        <div class="weui-cell ssjj_btn">
            <div class="weui-cell__hd">
                <div class="cl-f"><span>姓</span><span>名</span></div>
            </div>
            <div class="weui-cell__bd">
                <input type="text" class="weui-input username" name="username">
            </div>
        </div>
    </div>
    <div> <img src="/static/index/img/lr3.png" alt=""></div>
    <div class="pl">
        <img src="/static/index/img/lr4.png" alt="">
        <div class="weui-cell ssjj_btn">
            <div class="weui-cell__hd">
                <div class="cl-f"><span>性</span><span>别</span></div>
            </div>
            <div class="weui-cell__bd pl">
                <input type="text" class="weui-input" readonly id="sex">
                <span class="xia"><img src="/static/index/img/lr13.png" alt=""></span>
            </div>
        </div>
    </div>
    <div> <img src="/static/index/img/lr5.png" alt=""></div>
    <div class="pl">
        <img src="/static/index/img/lr6.png" alt="">
        <div class="weui-cell ssjj_btn">
            <div class="weui-cell__hd">
                <div class="cl-f"><span>电</span><span>话</span></div>
            </div>
            <div class="weui-cell__bd">
                <input type="text" class="weui-input tel" name="tel">
            </div>
        </div>
    </div>
    <div> <img src="/static/index/img/lr7.png" alt=""></div>
    <div class="pl">
        <img src="/static/index/img/lr8.png" alt="">
        <div class="weui-cell ssjj_btn">
            <div class="weui-cell__hd">
                <div class="cl-f"><span>选</span><span>择</span>
                    <span>赛</span><span>区</span></div>
            </div>
            <div class="weui-cell__bd pl">
                <input type="text" class="weui-input" readonly id="lr_btn">
                <span class="xia"><img src="/static/index/img/lr13.png" alt=""></span>
            </div>
        </div>
    </div>
    <div> <img src="/static/index/img/lr9.png" alt=""></div>
    <div class="pl">
        <img src="/static/index/img/lr10.png" alt="">
        <div class="ssjj_btn lr_btn">
            <a href="javascript:;" class="lr_btn1">
                <img src="/static/index/img/lr12.png" alt="">
            </a>
        </div>
    </div>
    <div> <img src="/static/index/img/lr11.png" alt=""></div>
</div>

<!-- jquery-2.1.4 -->
<script type="text/javascript" src="/static/index/jquery_weui/lib/jquery-2.1.4.js"></script>
<!-- jquery-weui.min.js -->
<script type="text/javascript" src="/static/index/jquery_weui/js/jquery-weui.js"></script>
<script type="text/javascript" src="/static/index/jquery_weui/js/swiper.min.js"></script>
<script>
    $(function () {
        $('#lr_btn').picker({
            title: "请选择赛区",
            cols: [
                {
                    textAlign: 'center',
                    values: ['河东校区', '河西校区']
                }
            ]
        });
        $('#sex').picker({
            title: "请选择性别",
            cols: [
                {
                    textAlign: 'center',
                    values: ['男', '女']
                }
            ]
        });

        $('.lr_btn1').on('click',function () {
            // 检查数据
            if (!$('input[name="username"]').val()) {
                $('input[name="username"]').focus();
                alert('请输入您的姓名');
                return false;
            }
            if (!$('input[name="username"]').val().match(/^[\u4E00-\u9FA5]{2,4}$/)) {
                $('input[name="username"]').focus();
                alert('姓名格式不正确');
                return false;
            }

            if (!$('input[name="tel"]').val()) {
                $('input[name="tel"]').focus();
                alert('请输入您的手机号码');
                return false;
            }

            if (!$('input[name="tel"]').val().match(/^0?(13|14|15|17|18)[0-9]{9}$/)) {
                $('input[name="tel"]').focus();
                alert('手机号码格式不正确');
                return false;
            }

            var username = $('.username').val();
            var sex = $('#sex').val();
            var tel = $('.tel').val();
            var place = $('#lr_btn').val();
            $.post(
                "/index/active/enlist_btn",
                {username:username,sex:sex,tel:tel,place:place},
                function (data) {
                    if(data.code == 200){
                        alert(data.msg);
                        window.location.href="http://tour.mgtvshop.com/index/index/article?id=12";
                    }else{
                        alert(data.msg);
                    }
                },'json'
            )
        })
    })
</script>
</body>
</html>


</html>